<template>
  <el-form :model="localFormData" class="max-w-2xl mx-auto p-6 bg-white rounded-lg shadow-lg">
    <template v-for="(field, index) in config" :key="index">
      <el-form-item :label="field.label" class="mb-6">
        <el-input
          v-if="field.type === 'input'"
          v-model="localFormData[field.name]"
          :placeholder="field.placeholder"
          @input="updateModelValue"
          class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        ></el-input>
        <el-input
          v-else-if="field.type === 'textarea'"
          v-model="localFormData[field.name]"
          type="textarea"
          :rows="field.rows || 5"
          :placeholder="field.placeholder"
          @input="updateModelValue"
          class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        ></el-input>
      </el-form-item>
    </template>
  </el-form>
</template>

<script setup>
import { reactive, watch } from 'vue'

const props = defineProps({
  config: {
    type: Array,
    required: true
  },
  modelValue: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:modelValue'])

const localFormData = reactive({ ...props.modelValue })

const updateModelValue = () => {
  emit('update:modelValue', { ...localFormData })
}

watch(() => props.modelValue, (newValue) => {
  Object.assign(localFormData, newValue)
}, { deep: true })
</script>

<style scoped>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

.el-form-item__label {
  @apply block text-sm font-medium text-gray-700 mb-2;
}
</style>
